feat(react-charts): vega lite schema support by AtishayMsft · Pull Request #35546 · microsoft/fluentui

AtishayMsft · 2025-12-06T10:01:08Z

Previous Behavior

New Behavior

Summary

Adds a new VegaDeclarativeChart component that renders Vega-Lite specifications using Fluent UI chart components. This is a companion to the existing Plotly-based DeclarativeChart, enabling a second declarative grammar for data visualization.

The component transforms Vega-Lite JSON specs into the appropriate Fluent UI chart type (line, bar, area, scatter, donut, heatmap, polar, etc.) and renders them with full interactivity including legends, tooltips, and theme support.

New Files

File	Purpose
`VegaDeclarativeChart.tsx`	Main component — chart type detection, routing, concat layout support, shared legend for multi-chart layouts
`VegaLiteSchemaAdapter.ts`	Transforms Vega-Lite specs into Fluent chart props (12 chart type transformers)
`VegaLiteTypes.ts`	TypeScript interfaces for Vega-Lite spec structure (marks, encodings, scales, axes, etc.)
`VegaLiteColorAdapter.ts`	Color scheme mapping (category10, tableau10, etc.) and persistent color assignment via colorMap
`VegaDeclarativeChartHooks.ts`	Shared hooks — `useIsDarkTheme()` and `useColorMapping()`
`VegaDeclarativeChartDefault.stories.tsx`	Storybook story with 25 inline schemas + GitHub-loaded schema browser
`VegaDeclarativeChart.test.tsx`	40 component-level tests (rendering, snapshots, chart type detection)
`VegaLiteSchemaAdapterUT.test.tsx`	54 adapter unit tests (transformers, validation, edge cases)

Supported Chart Types

Line — temporal, quantitative, and ordinal x-axes; multi-series with color encoding; interpolation mapping
Area — stacked area charts with color encoding
Vertical Bar — categorical and quantitative x-axes; numeric x values converted to categorical strings
Stacked Bar — color-encoded stacking; combo bar+line layered specs; aggregate support (count/sum/mean)
Grouped Bar — xOffset encoding detection
Horizontal Bar — nominal/ordinal y-axis detection; aggregate support
Scatter — point/circle/square marks; size and color encoding
Donut/Pie — arc marks with theta encoding; innerRadius for donut vs pie
Heatmap — rect marks with quantitative color; complete grid generation (fills missing cells with 0); named color schemes (blues, viridis, etc.)
Histogram — binned x-axis with configurable bin count; non-count aggregates (max/mean/sum)
Polar — theta+radius encoding for radial charts
Combo — layered bar+line specs rendered via stacked bar with line overlays

Key Features

Auto-correction of encoding types — quantitative fields with string data are auto-corrected to nominal before chart type routing, matching Plotly adapter behavior
Aggregate support — count, sum, mean, min, max aggregations on bar charts (vertical, horizontal, stacked)
hconcat/vconcat layouts — multiple charts in grid layout with shared legend rendered outside the grid; legend selection propagates to all sub-charts
Fold transform — transform: [{fold: [...]}] for reshaping wide data to long format
Color persistence — colorMap ref maintains consistent color assignments across re-renders
Title extraction — supports both encoding.y.title (shorthand) and encoding.y.axis.title (explicit)
Dark theme — automatic theme detection via useIsDarkTheme hook
Ordinal x-axis — maps categorical strings to sequential numeric indices with tick labels

API Surface

// New exports from @fluentui/react-charts
export const VegaDeclarativeChart: React.ForwardRefExoticComponent<VegaDeclarativeChartProps>;

export interface VegaDeclarativeChartProps {
  chartSchema: VegaSchema;
  className?: string;
  style?: React.CSSProperties;
  onSchemaChange?: (newSchema: VegaSchema) => void;
}

export interface VegaSchema {
  vegaLiteSpec: VegaLiteSpec;
  selectedLegends?: string[];
}

export type VegaLiteSpec = any; // Accepts any valid Vega-Lite JSON

Test Plan

94 unit tests pass (40 component + 54 adapter)
29 snapshot tests pass
tsc --noEmit clean for both tsconfig.lib.json and tsconfig.spec.json
nx format:check passes
No changes to existing DeclarativeChart (Plotly adapter) or any other component
No new dependencies added to package.json
Storybook renders correctly with 25 inline schemas covering all chart types

Related Issue(s)

Fixes #

github-actions · 2025-12-06T10:04:48Z

📊 Bundle size report

✅ No changes found

github-actions · 2025-12-06T10:07:52Z

Pull request demo site: URL

packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md

- Use resetIdsForTests() from @fluentui/react-utilities (same as Plotly tests) - Update snapshots with deterministic IDs - Update schema count test from >100 to 25 (after schema reduction) - All VegaDeclarativeChart tests now pass Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- Add Playwright e2e spec for batch screenshot testing of vega schemas - Add unit test spec for VegaDeclarativeChart storybook stories - Add timeout test spec for debugging blank/error schemas - Add Playwright config and helper scripts (e2e runner, contact sheets) - Add code review observations and reported bugs documentation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Remove overflow:hidden from grid container and cells so legends are not clipped. minWidth:0 already prevents grid blowout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Hide legends on all sub-charts and render a single shared legend below the grid using getVegaLiteLegendsProps + Legends component. Fixes legend being clipped inside grid cells. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Pass multiSelectLegendProps (canSelectMultipleLegends, onChange, selectedLegends) to the shared Legends component so clicking a legend item propagates the selection state to all sub-charts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Verifies that hconcat donut charts render a shared legend outside the grid with correct legend items. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Revert DeclarativeChart.tsx and ChartTable.tsx to master (keep DeclarativeChartHooks.ts as shared utility) - Remove color-schemes and validation-tests example folders - Remove CODE_REVIEW_OBSERVATIONS.md and ReportedBugs.csv - Remove E2E_SCREENSHOT_TESTING.md, playwright.config.ts - Remove stories/scripts/ (e2e.js, create-contact-sheets.mjs) - Remove e2e spec, unit spec, and timeout-test spec files These helper scripts and docs will be moved to the fluentui-charting-contrib repository. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Rename to VegaDeclarativeChartHooks.ts and update import. Keeps DeclarativeChart folder clean of Vega-specific files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Add !! to isHConcatSpec/isVConcatSpec for boolean coercion - Add non-null assertions for spec.hconcat/vconcat after guard - Cast ChartRenderer props to any (transformer output is dynamic) - Remove unused yType variable - Fix rectText possibly undefined with fallback - Cast color.sort access to Record for missing property - Cast arc mark comparison to string for type overlap - Add datum, timeUnit, zero, reverse to type interfaces Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Restore Schema.plotlySchema to non-optional (matches reverted DeclarativeChart.tsx) and remove selectedLegends. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add VegaDeclarativeChart to index.ts barrel export and restore VegaDeclarativeChart, VegaDeclarativeChartProps, VegaLiteSpec, VegaSchema entries in react-charts.api.md. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The tsconfig.spec.json strict mode requires explicit types for spec objects passed to VegaDeclarativeChart to avoid mark type mismatch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ain type - Add 'arc' to VegaLiteMark union type - Add xOffset encoding for grouped bar chart detection - Add tooltip encoding (any type for flexibility) - Change scale.domain from tuple to array for variable-length domains Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add non-null assertions for spec.encoding, result.data, and props.data accesses in test assertions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

atisjai added 3 commits November 26, 2025 20:57

Limit d3 color to the utility needed

a09edc1

Add support for vega lite for fluent charts

575ee59

Improvements and bug fixes

567feea

github-actions bot reviewed Dec 6, 2025

View reviewed changes

packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md Outdated Show resolved Hide resolved

atisjai added 8 commits December 6, 2025 17:14

Fix formatting

2d7a086

Fix formatting

1c61cdf

Fix lint errors

3386c5c

Fix lint errors

d095f0a

Fix tests

ed21fa2

Merge branch 'master' into usr/atisjai/vegaLiteFluent

cdd710e

Fix formatting

eb9b320

Merge branch 'master' into usr/atisjai/vegaLiteFluent

c8e285f

microsoft-github-policy-service bot added the PR: API Modified label Jan 7, 2026

atisjai and others added 15 commits January 7, 2026 07:41

Fix color fix bars issue

6bae230

Fix test lint

e3dd838

Fix issue

1b91e49

Fix issues

3fb4e69

Fix tests

9eb6319

Fix bugs

24eacdf

Merge branch 'master' into usr/atisjai/vegaLiteFluent

e03162f

Fix formatting issues

1dbdd1c

Update snapshots

db2e585

Merge branch 'master' into usr/atisjai/vegaLiteFluent

23cce90

Update snapshots

d6050b0

Update snapshots

2501a04

Fix type check errors

c64fecf

Fix formatting errors

9f82062

atisjai and others added 26 commits February 16, 2026 17:29

Remove console.warn calls from production code

0acdab5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Fix bugs

aa5a417

Fix bugs

25c274e

Fix bugs

13be71f

Fix bugs

d8dff33

Fix bugs

e5b2638

Fix bug

e1e13ac

Fix legend clipping in hconcat/vconcat layouts

cf2bc21

Remove overflow:hidden from grid container and cells so legends are not clipped. minWidth:0 already prevents grid blowout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add test for hconcat shared legend rendering

2cceb77

Verifies that hconcat donut charts render a shared legend outside the grid with correct legend items. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Revert config/tests.js - resetIdsForTests already called in test files

5e23cb2

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Revert package.json changes - remove vega-lite dependency and e2e script

a881fc6

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Move DeclarativeChartHooks to VegaDeclarativeChart folder

3728c06

Rename to VegaDeclarativeChartHooks.ts and update import. Keeps DeclarativeChart folder clean of Vega-specific files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Fix formatting with nx format:write

de662b8

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Fix formatting for VegaDeclarativeChart.tsx

a7ba254

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Update react-charts.api.md for new VegaDeclarativeChart exports

ee1bb10

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Fix react-charts.api.md to match reverted Schema interface

05fb8fe

Restore Schema.plotlySchema to non-optional (matches reverted DeclarativeChart.tsx) and remove selectedLegends. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Update public api

700f656

Fix test type errors: annotate spec variables with VegaLiteSpec type

a7ac7db

The tsconfig.spec.json strict mode requires explicit types for spec objects passed to VegaDeclarativeChart to avoid mark type mismatch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Fix possibly-undefined errors in adapter unit tests

80a0e35

Add non-null assertions for spec.encoding, result.data, and props.data accesses in test assertions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

AtishayMsft marked this pull request as ready for review March 2, 2026 03:54

AtishayMsft removed the request for review from a team March 2, 2026 03:54

AtishayMsft merged commit 26229a9 into microsoft:master Mar 2, 2026
12 checks passed

AtishayMsft deleted the usr/atisjai/vegaLiteFluent branch March 2, 2026 04:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-charts): vega lite schema support#35546

feat(react-charts): vega lite schema support#35546
AtishayMsft merged 72 commits intomicrosoft:masterfrom
AtishayMsft:usr/atisjai/vegaLiteFluent

AtishayMsft commented Dec 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 6, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

AtishayMsft commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Summary

New Files

Supported Chart Types

Key Features

API Surface

Test Plan

Related Issue(s)

Uh oh!

github-actions bot commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Dec 6, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AtishayMsft commented Dec 6, 2025 •

edited

Loading

github-actions bot commented Dec 6, 2025 •

edited

Loading